﻿<!-- #layout name=default -->
<div id="main" class="offset-top" v-cloak>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="page-header">
          <h1 class="title">Create a new site</h1>
        </div>
        <kb-form
          simple
          class="form-horizontal"
          :model="model"
          :rules="rules"
          ref="form"
          id="create_site_form"
        >
          <div class="note note-info">
            <p>{{Kooboo.text.site.sites.createModalTip}}</p>
          </div>
          <kb-form-item class="form-group" prop="SiteName" v-slot="error">
            <div :class="{'has-error': !!error.error}">
              <label class="col-md-2 control-label" for="SiteName"
                >Site name</label
              >
              <div class="col-md-10">
                <input
                  class="input-medium form-control"
                  placeholder="Site name"
                  type="text"
                  v-model="model.SiteName"
                  data-container="#create_site_form"
                  v-kb-tooltip:right.manual.error="error.error"
                />
                <span class="help-block"
                  >Start with letters and no space allowed.</span
                >
              </div>
            </div>
          </kb-form-item>
          <kb-form-item class="form-group" prop="SubDomain" v-slot="error">
            <div :class="{'has-error': !!error.error}">
              <label class="col-md-2 control-label" for="SubDomain"
                >domain</label
              >
              <div class="col-md-10">
                <div class="form-inline">
                  <input
                    class="input-medium form-control"
                    placeholder="SubDomain"
                    type="text"
                    v-model="model.SubDomain"
                  />
                  <select
                    v-model="model.RootDomain"
                    class="form-control"
                    data-container="#create_site_form"
                    v-kb-tooltip:right.manual.error="error.error"
                  >
                    <option
                      v-for="$data in domains"
                      :value="$data.domainName"
                      :key="$data.domainName"
                      >{{'.'+$data.domainName}}</option
                    >
                  </select>
                </div>
                <span class="help-block"
                  >Give your site a domain that other people can access.</span
                >
              </div>
            </div>
          </kb-form-item>
          <ul class="pager">
            <li class="next">
              <button class="btn blue" @click="onCreateSubmit">Start</button>
            </li>
            <li class="previous">
              <a @click.prevent="SPAClick" class="btn gray">Return</a>
            </li>
          </ul>
        </kb-form>
      </div>
    </div>
  </div>
</div>
<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/SPA.js",
    "/_Admin/Scripts/components/kbForm.js"
  ]);
  var self = new Vue({
    el: "#main",
    data: function() {
      return {
        model: {
          SiteName: "",
          SubDomain: "",
          RootDomain: ""
        },
        rules: {
          SiteName: [
            { required: Kooboo.text.validation.required },
            {
              pattern: /^([A-Za-z][\w\-\.]*)*[A-Za-z0-9]$/,
              message: Kooboo.text.validation.siteNameInvalid
            },
            {
              remote: {
                url: Kooboo.Site.isUniqueName(),
                data: function() {
                  return {
                    SiteName: self.model.SiteName
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ],
          SubDomain: [
            { required: Kooboo.text.validation.required },
            {
              pattern: /^([A-Za-z][\w\-\.]*)*[A-Za-z0-9]$/,
              message: Kooboo.text.validation.siteNameRegex
            },
            {
              min: 1,
              max: 63,
              message:
                Kooboo.text.validation.minLength +
                1 +
                ", " +
                Kooboo.text.validation.maxLength +
                63
            },
            {
              remote: {
                url: Kooboo.Site.CheckDomainBindingAvailable(),
                data: function() {
                  return {
                    SubDomain: self.model.SubDomain,
                    RootDomain: self.model.RootDomain
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ]
        },
        domains: []
      };
    },
    mounted: function() {
      var self = this;
      $.when(Kooboo.Domain.getAvailable()).then(function(availRes) {
        if (availRes.success) {
          self.domains = availRes.model;
          if (self.domains.length) {
            self.model.RootDomain = self.domains[0].domainName;
          }
        }
      });
    },
    methods: {
      onCreateSubmit: function() {
        if (self.$refs.form.validate()) {
          Kooboo.Site.Create(self.model).then(function(res) {
            if (res.success) {
              location.href = Kooboo.Route.Get(Kooboo.Route.Site.DetailPage, {
                SiteId: res.model.id
              });
            }
          });
        }
      },
      SPAClick: function() {
        self.$refs.form.clearValid();
        self.$nextTick(function() {
          Kooboo.SPA.getView(Kooboo.Route.Site.ListPage, {
            container: '[layout="default"]'
          });
        });
      }
    },
    watch: {
      "model.SiteName": function(value) {
        self.model.SubDomain = value;
      }
    }
  });
</script>
